<template>
  <div class="admin">
    <el-container>
      <el-header style="background-color: #ffb8c6;float: left">
        <img src="//pro.upload.logomaker.com.cn/2022/09/01/2209010225042686.png" style="width:40px;position: relative;top: 10px">
        <span style="line-height: 60px;font-size: 20px;color: white;margin-left: 10px">幸运果后台管理系统</span>
          <el-menu class="tools-right-control hover avatar" router collapse-transition style="float: right">
            <el-avatar icon="el-icon-user-solid" size="small" src=""></el-avatar>
            <el-dropdown>
              <span class="el-dropdown-link"><i class="el-icon-arrow-down el-icon--right"></i></span>
              <el-dropdown-menu slot="dropdown" router collapse-transition>
                <el-dropdown-item command="a" @click="details()">
                  <router-link to="/admin/adminDetails"><i class="el-icon-setting" style="font-style: normal">&nbsp;&nbsp;个人中心</i></router-link>
                </el-dropdown-item>
                <el-dropdown-item command="b">
                  <router-link to="/shangPin/updatePassWord"><i class="el-icon-setting" style="font-style: normal">&nbsp;&nbsp;修改密码</i></router-link>
                </el-dropdown-item>
                <el-dropdown-item command="c">
                  <span @click="signOut()"><i class="el-icon-switch-button"></i> 退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-menu>
      </el-header>
      <el-container class="layout-body">
        <el-aside class="layout-aside">
          <!--导航菜单开始-->
          <el-menu
              router
              :default-active="$router.currentRoute.path"
              background-color="#FFCCCC"
              class="el-menu-vertical-demo"
              text-color="#fff"
              active-text-color="#CCFFFF"
              @select="handleSelect">
            <el-submenu index="1">
              <!--添加子菜单标题-->
              <template slot="title">
                <i class="el-icon-s-flag"></i>
                <span>欢迎首页</span>
              </template>
              <!--添加菜单项-->
              <el-menu-item index="1-1">欢迎界面</el-menu-item>
            </el-submenu>
            <!--添加子菜单-->
            <el-submenu index="2">
              <!--添加子菜单标题-->
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>用户管理</span>
              </template>
              <!--添加菜单项-->
              <el-menu-item index="/admin/UserList"><i class="el-icon-s-operation"></i>用户列表</el-menu-item>
              <el-menu-item index="/admin/AddUser"><i class="el-icon-circle-plus"></i>添加用户</el-menu-item>
            </el-submenu>

            <el-submenu index="3">
              <!--添加子菜单标题-->
              <template slot="title">
                <i class="el-icon-s-flag"></i>
                <span>商品信息管理</span>
              </template>
              <!--添加菜单项-->
              <el-menu-item index="/admin/ProductList"><i class="el-icon-s-operation"></i>商品列表</el-menu-item>
              <el-menu-item index="/admin/AddProduct"><i class="el-icon-circle-plus"></i>添加商品</el-menu-item>
            </el-submenu>

            <el-submenu index="4">
              <!--添加子菜单标题-->
              <template slot="title">
                <i class="el-icon-picture"></i>
                <span>轮播图管理</span>
              </template>
              <!--添加菜单项-->
              <el-menu-item index="/admin/BannerList"><i class="el-icon-s-operation"></i>轮播图列表</el-menu-item>
              <el-menu-item index="/admin/addBanner"><i class="el-icon-circle-plus"></i>添加轮播图</el-menu-item>
            </el-submenu>

            <el-submenu index="5">
              <!--添加子菜单标题-->
              <template slot="title">
                <i class="el-icon-shopping-cart-2"></i>
                <span>订单管理</span>
              </template>
              <!--添加菜单项-->
              <el-menu-item index="/orders/ordersList"><i class="el-icon-s-operation"></i>订单列表</el-menu-item>
            </el-submenu>

            <el-submenu index="6">
              <!--添加子菜单标题-->
              <template slot="title">
                <i class="el-icon-message"></i>
                <span>留言管理</span>
              </template>
              <!--添加菜单项-->
              <el-menu-item index='/admin/messagesList'><i class="el-icon-s-operation"></i>留言列表</el-menu-item>
            </el-submenu>

            <el-submenu index="7">
              <!--添加子菜单标题-->
              <template slot="title">
                <i class="el-icon-share"></i>
                <span>分类管理</span>
              </template>
              <!--添加菜单项-->
              <el-submenu index="7-1">
                <template slot="title">大种类管理</template>
                <el-menu-item index="/admin/categoryList"><i class="el-icon-s-operation"></i>种类列表</el-menu-item>
                <el-menu-item index="/admin/AddCategory"><i class="el-icon-circle-plus"></i>添加种类</el-menu-item>
              </el-submenu>

              <el-submenu index="7-2">
                <template slot="title">小种类管理</template>
                <el-menu-item index="/admin/classList">种类列表</el-menu-item>
                <el-menu-item index="/admin/addclass">添加种类</el-menu-item>
              </el-submenu>

            </el-submenu>

            <el-submenu index="8">
              <!--添加子菜单标题-->
              <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span>管理员管理</span>
              </template>
              <!--添加菜单项-->
              <el-menu-item index="/admin/addAdmin">添加管理员</el-menu-item>
              <!--添加菜单项-->
              <el-menu-item index="/admin/">管理员列表</el-menu-item>
            </el-submenu>

            <el-submenu index="9">
              <!--添加子菜单标题-->
              <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span>公告管理</span>
              </template>
              <!--添加菜单项-->
              <el-menu-item index="/admin/announcementList">公告列表</el-menu-item>
              <el-menu-item index="/admin/add-announcement">添加公告</el-menu-item>
            </el-submenu>

          </el-menu>
          <!--导航菜单结束-->
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  data: function () {
    return {
      messageArr: [{addtime: "2022.22.22", content: "我爱你!", userid: "1"}, {
        addtime: "2022.22.22",
        content: "我爱你!",
        userid: "1"
      },
        {addtime: "2022.22.22", content: "我爱你!", userid: "1"}, {addtime: "2022.22.22", content: "我爱你!", userid: "1"},],
      currentIndex: "1-1",
      categoryArr: [],
      bannerArr: [],
      productArr: [],
      userArr: [{id: 1, username: "han", password: "123", nick: "HOIIOH"}, {
        id: 1,
        username: "han",
        password: "123",
        nick: "HOIIOH"
      },
        {id: 1, username: "han", password: "123", nick: "HOIIOH"}, {
          id: 1,
          username: "han",
          password: "123",
          nick: "HOIIOH"
        },],
      user: []
    }
  },
  methods: {
    signOut(){
      localStorage.removeItem('jwt');
      location.reload();
    },
    details(){
      console.log("跳转页面")
      location.href='/admin/adminDetails'
    },
    bannerDelete(i, banner) {
      //发出删除轮播图请求
      axios.get("/banner/delete?id=" + banner.id).then(function () {
        //删除数组中的数据
        v.bannerArr.splice(i, 1);
      })
    },

    handleSelect(key, keyPath) {
      console.log(key);
      if (key == '1-') {

      } else if (key == '2-2') {

      } else if (key == '3-2') {

      } else {
        v.currentIndex = key;
      }

    }
  },

  created: function () {
    let jwt = localStorage.getItem('jwt');
    console.log(jwt);
    if (!jwt) {
      this.$message.error('您还未登录，请先登录');
      this.$router.push('/admin/login');
    }
  }
}
</script>
<style>

.layout-body {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
}

.layout-aside {
  overflow: auto;
  box-sizing: border-box;
  flex-shrink: 0;
  background: #FFCCCC;
  width: 300px
}

.layout-aside i {
  color: #fff !important;
}

.el-menu-item.is-active {
  background: #6495ed !important;
}

.admin {
  text-align: left;
}
.tools-right-control {
  border: 0px;
  background-color: #ffb8c6;
  /*
  background-color: rgba(0,0,0,0);
  */
  min-width: 50px;
  height: 50px;
  cursor: pointer;
  display: flex;
  vertical-align: top;
  justify-content: center;
  align-items: center;
  font-size: 23px;
}
</style>
